<template>
	<view>
		<view class="topBar">
			<view v-for="(item, index) in topBarList" :key="item.id" @tap="changetarBar(index)" :class="['topBar_t', {'active': item.id == activeIndex}]">
				{{item.text}}
			</view>
		</view>
		<!-- 精选文章列表 -->
		<view class="list_item_c" v-if="activeIndex == 0">
			<view class="contain">

				<view class="list_item" v-for="(item, index) in articleList" :key="index">
					<view class="item_image_c">
						<image :src="item.coverImg ? item.coverImg : '../../static/image/noImage.jpg'" mode="widthFix"></image>
					</view>
					<view class="btn_bar">
						<view class="btn_left">
							<image src="../../static/image/view.png" mode="widthFix"></image>
							<text>{{item.viewCount}}</text>
						</view>
						<view class="btn_right" @tap="collectB(item)">
							<image v-if="isCollect(item)" src="../../static/image/collect_active.png" mode="widthFix"></image>
							<image v-else src="../../static/image/collect.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 品牌列表 -->
		<view class="brand_list" v-else>
			<view class="contain">
				<view class="brand_item" v-for="(item, index) in brandsList" :key='index'>
					<view class="item_image_c">
						<image :src="item.bigPic ? item.bigPic : '../../static/image/noImage.jpg'" mode="widthFix"></image>
					</view>
					<view class="detail_c">
						<view class="item_detail">
							<text>{{item.name | clearLineFeed}}</text>
							<text v-if="item.brandStory">{{item.brandStory | clearLineFeed}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../api/request.js';

	export default {
		data() {
			return {
				// 当前选中的选项需要
				activeIndex: 0,
				// 文章列表
				articleList: [],
				// 品牌列表
				brandsList: [],
				topBarList: [{
					id: 0,
					text: "精选文章"
				}, {
					id: 1,
					text: "品牌列表"
				}, ],
				// 本地模拟已经收藏的文章
				havecollectArticleList:[]
			};
		},
		methods: {
			// 请求精选文章数据
			async requestArticleList() {
				const res = await request({
					url: "/productArticle/findArticleByPage/1/10",
				});
				this.articleList = res.data.data.rows;
				// 获取文章数据时,并处理已经收藏的文章
				this.havecollectArticleList = uni.getStorageSync('havecollectArticleList') ? uni.getStorageSync('havecollectArticleList') : [];
				// const havecollectArticleListId = this.articleList.filter(item => {
				// 	return this.havecollectArticleList.find(item1 => item1.id === item.id)
				// })
				// console.log(havecollectArticleListId);
				
			},
			changetarBar(index) {
				this.activeIndex = index;
			},
			// 请求品牌列表
			async requestBrandList() {
				const res = await request({
					url: "/brand/findBrandsByPage/1/10"
				})
				this.brandsList = res.data.data.rows;
			},
			// 收藏
			collectB(item) {
				const isCollectIndex = this.havecollectArticleList.findIndex(function(item1){
					return item1.id == item.id
				})
				if(isCollectIndex == -1) {
					this.havecollectArticleList.push(item);
				} else {
					this.havecollectArticleList.splice(isCollectIndex, 1);
				}
				
				uni.setStorageSync("havecollectArticleList",this.havecollectArticleList)
			},
		},
		onLoad() {
			this.requestArticleList();
			this.requestBrandList()
		},
		computed:{
			isCollect() {
				return function (item) {
					return this.havecollectArticleList.find(function(item1){
						return item1.id === item.id
					})
				}
			}
		},
		filters: {
			clearLineFeed: function(value) {
				return value.replace(/\n/, ' ')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topBar {
		display: flex;
		justify-content: center;
		position: fixed;
		z-index: 1000;
		top: 0;
		height: 76rpx;
		width: 100%;
		background-color: $themeColor;
		color: #fff;

		.topBar_t {
			position: relative;
			text-align: center;
			height: 100%;
			line-height: 76rpx;
			width: 200rpx;

			&.active::after {
				position: absolute;
				bottom: 6rpx;
				left: 50%;
				transform: translateX(-50%);
				content: "";
				display: block;
				width: 80%;
				height: 4rpx;
				background-color: #fff;
			}
		}

	}

	.list_item_c {
		box-sizing: border-box;
		padding-top: 76rpx;

		.contain {
			width: 90%;
			margin: auto;

			.list_item {
				margin-top: 40rpx;
				margin-bottom: 40rpx;
				background-color: #fff;
				border-radius: 40rpx;
				overflow: hidden;

				.item_image_c {
					image {
						width: 100%;
					}
				}

				.btn_bar {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 40rpx;
					height: 100rpx;

					.btn_left {
						image {
							width: 40rpx;
							vertical-align: middle;
						}

						text {
							margin-left: 40rpx;

							span {
								color: red;
							}
						}
					}

					.btn_right {
						image {
							width: 40rpx;
						}
					}
				}
			}

		}
	}

	.brand_list {
		box-sizing: border-box;
		padding-top: 76rpx;

		.contain {
			width: 90%;
			margin: auto;

			.brand_item {
				overflow: hidden;
				border-radius: 40rpx;
				background-color: #fff;
				margin: 40rpx 0;

				.item_image_c {
					image {
						width: 100%;
					}
				}

				.detail_c {

					height: 100rpx;
					padding: 0 40rpx;

					.item_detail {
						height: 100%;
						display: flex;
						flex-wrap: wrap;
						align-content: center;

						text {
							display: block;
							height: fit-content;
							width: 100%;
							white-space: nowrap;

							&:nth-child(2) {
								font-size: 24rpx;
								color: #b1b1b1;
							}

							&:nth-child(1) {
								font-size: 32rpx;
								font-weight: 600;
								color: #3e3e3e;
							}
						}
					}
				}
			}

		}
	}
</style>
